<template>
  <div class="freeGame">
    <div class="planList">
      <div class="planListItem" v-for="(item, index) in planList" @click="onPlayGame(item)"
        :style="{ background: `url(/imgs/home/colect_${index % 6 || 5}.png) no-repeat` }" :key="index">
        <div class="name">Queen Of Bqweqwe</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">


import { onMounted,  ref } from "vue";
import PKwebsocket from "@/lolo/Ws";
import { NetPacket } from '@/netBase/NetPacket';


import { onPlayGame } from "@/utils/useStoreMethods";
const planList = ref([1, 2, 3, 4, 5, 6, 7, 8, 8])

const handleFreeTreasureInfo = async (data: any) => {

  console.log(data, '----data');

};

// const handleGameToUrl = (res: any) => {
//   // if (!res.url) return Message.success('打开失败，请刷新重试')
//   window.open(res.url)
// }


const reqFreeTreasureInfo = () => {
  const req = NetPacket.req_free_treasure_info();
  PKwebsocket.instance.send(req, true, {
    callbackName: 'msg_notify_free_treasure_info',
    callback: handleFreeTreasureInfo
  })
}


onMounted(() => {
  // 免费夺宝
  reqFreeTreasureInfo()
})


</script>

<style scoped lang="scss">
.freeGame {
  width: 100%;

  .planList {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    .planListItem {
      position: relative;
      width: 105px;
      height: 105px;
      background-size: contain !important;
      border-radius: 7px;

      .name {
        position: absolute;
        bottom: 6px;
        left: 50%;
        transform: translateX(-50%);
        color: #FFF;
        width: 66px;
        font-family: "PingFang SC";
        font-size: 10.5px;
        font-weight: 400;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
